---
title: Toggle Group
description: A collection of buttons with true or false states, which can be activated or deactivated by toggling.
---

{/* prettier-ignore-start */}
{/* prettier-ignore-end */}

import Code from '@/components/Code.astro';
import { LinkButton } from '@/components/react/LinkButton';
import { Aside, Tabs, TabItem } from '@astrojs/starlight/components';
import importedCode from '@rnr/reusables/components/ui/toggle-group?raw';

<LinkButton href='https://rn-primitives.vercel.app/toggle-group'>Toggle Group Primitive</LinkButton>
<LinkButton href='/components/text'>Text Component</LinkButton>
<LinkButton target='_blank' href='https://rnr-showcase.vercel.app/toggle-group'>
  Demo
</LinkButton>

<br />

A collection of buttons with true or false states, which can be activated or deactivated by toggling.

### Installation

<Tabs>
  <TabItem label='CLI'> 
    ```bash
    npx @react-native-reusables/cli@latest add toggle-group
    ```
  </TabItem>
  <TabItem label='Manual'>
    <Aside type='tip' title='Dependencies'>
      Before copy/pasting, add the <a href='https://rn-primitives.vercel.app/toggle-group' className='text-white font-bold'>toggle group primitive</a> and the <a href='/components/text' className='text-white font-bold'>text component</a> to your project.
    </Aside>

    <br />

    **Copy/paste the following code to `~/components/ui/toggle-group.tsx`:**

    <Code code={importedCode} lang='tsx' title='~/components/ui/toggle-group.tsx' />
  </TabItem>
</Tabs>


### Usage

```tsx
import * as React from 'react';
import { View } from 'react-native';
import { ToggleGroup, ToggleGroupIcon, ToggleGroupItem } from '~/components/ui/toggle-group';
import { Bold } from '~/lib/icons/Bold';
import { Italic } from '~/lib/icons/Italic';
import { Underline } from '~/lib/icons/Underline';

function Example() {
  const [value, setValue] = React.useState<string[]>([]);

  return (
    <View className='flex-1 justify-center items-center p-6 gap-12'>
      <ToggleGroup value={value} onValueChange={setValue} type='multiple'>
        <ToggleGroupItem value='bold' aria-label='Toggle bold'>
          <ToggleGroupIcon icon={Bold} size={18} />
        </ToggleGroupItem>
        <ToggleGroupItem value='italic' aria-label='Toggle italic'>
          <ToggleGroupIcon icon={Italic} size={18} />
        </ToggleGroupItem>
        <ToggleGroupItem value='underline' aria-label='Toggle underline'>
          <ToggleGroupIcon icon={Underline} size={18} />
        </ToggleGroupItem>
      </ToggleGroup>
    </View>
  );
}

```

## Props

### ToggleGroup

Extends [`View`](https://reactnative.dev/docs/view#props) props

|   Prop   |  Type   |     Note     |
| :------: | :-----: | :----------: |
| type  | 'single' \| 'multiple' | |
| value  | string \| undefined \| string[] | |
| onValueChange  | (val: string \| undefined \| string[]) => void | |
| asChild  | boolean | _(optional)_ |
| disabled  | boolean | _(optional)_ |
| rovingFocus  | boolean | Web only _(optional)_ |
| orientation  | 'horizontal' \| 'vertical' | Web only _(optional)_ |
| dir  | 'ltr' \| 'rtl' | Web only _(optional)_ |
| ltr  | boolean | Web only _(optional)_ |

### ToggleGroupItem

Extends [`Pressable`](https://reactnative.dev/docs/pressable#props) props

|    Prop    |        Type        |     Note     |
| :--------: | :----------------: | :----------: |
| value | string |  |
|  asChild   |      boolean       | _(optional)_ |
| variant | 'default' \| 'outline' | _(optional)_ |
| size | 'default' \| 'sm' \| 'lg' | _(optional)_ |

### ToggleIcon

Extends [`LucideIcon`](https://lucide.dev/guide/packages/lucide-react-native#props) props

|    Prop    |        Type        |     Note     |
| :--------: | :----------------: | :----------: |
|  icon   |      LucideIcon       |              |
